import { useNavigate } from 'react-router-dom'
import appSdk from '../../utils/app_sdk'
import './index.less'
import { isIOS } from '../../utils/util'

export default function NavBar({ title, other, simple = false, style }) {
  const navigate = useNavigate()

  const onBack = () => {
    console.log('back')
    if (window?.android || isIOS()) {
      appSdk('backPress')
    } else {
      navigate(-1)
    }
  }

  const onClose = () => {
    appSdk('closeWebview')
  }

  return (
    <>
      <div className="navbar_content" style={style}>
        {!simple ? <div className="icon" onClick={onBack}></div> : null}
        {!simple ? <div className="close icon" onClick={onClose}></div> : null}

        <div className="navbar_title">{title}</div>
        {other ? <div className="other">{other}</div> : null}
      </div>
      <div className="hidden_box" style={style}></div>
    </>
  )
}
